<template>
  <div class="main-view">
    <div class="main-image"></div>
    <div class="main-content" v-for="(item, index) in mainContent" :key="'title-' + index">
      <div class="main-title">
        <el-icon size="18px" style="margin-right: 8px"><HelpFilled /></el-icon>
        <h1>{{ item.title }}</h1>
      </div>
      <div v-for="(contextItem, contextIndex) in item.context" :key="'p-' + contextIndex">
        <p>{{ contextItem }}</p>
      </div>
    </div>
    <div class="main-img">
      <el-image :src="url"></el-image>
    </div>
  </div>
</template>

<script setup>
import { useMainContentStore } from '@/stores/mian/content.js'
import { storeToRefs } from 'pinia'
import { HelpFilled } from '@element-plus/icons-vue'

const mainContentStore = useMainContentStore()
const { mainContent, url } = storeToRefs(mainContentStore)
</script>

<style scoped lang="scss">
.main-view {
  width: 100%;
  padding: 0;
  margin: 0;
  .main-image {
    height: 300px;
    background-image: url('/imgs/environmental-protection.jpg');
    background-repeat: no-repeat;
    background-position: center center; /* 图像居中 */
    background-size: cover; /* 使背景图填满并保持宽高比 */
    margin-bottom: 15px;
  }
  .main-content {
    /* 设置标题样式 */
    margin-top: 30px;
    .main-title {
      display: flex;
      font-size: 18px; /* 调整字体大小 */
      color: #333; /* 字体颜色 */
      text-align: left; /* 文本居中 */
      margin-bottom: 20px; /* 下边距，用于与内容间隔 */
      margin-left: 80px;
      font-weight: bold;
    }

    /* 设置内容段落样式 */
    p {
      font-size: 15px; /* 调整字体大小 */
      line-height: 1.5; /* 行高，提升阅读体验 */
      color: #404042; /* 字体颜色 */
      text-align: justify; /* 文本两端对齐 */
      margin: 20px 110px;
    }
  }
  .main-img {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
}
</style>
